import {Utils} from '../common.js'
import {Node, UniqueTree} from "./tree.js"

class ElementNode extends Node {
    constructor(key) {
        super();
        Utils.DefineProperty(this, 'key', key, false, true, false);
        this._layoutElem = Utils.CreateHTMLElement(`<div></div>`);
    }
    get layoutElem() {return this._layoutElem;}
    get containerElem() {return this._layoutElem.lastElementChild;}

    Update(data) {}

    _GenLeafElementHTMLText(offset, backgroundColor) {}
    _GenContainerElementHTMLText(offset, backgroundColor) {}

    Render() {
        if(this.isLeaf) {
            const _OFFSET = this.depth * OFFSET_PER_DEPTH + GAP_SIZE;
            this._layoutElem.innerHTML = this._GenLeafElementHTMLText(_OFFSET);
        } else {
            const _OFFSET = this.depth * OFFSET_PER_DEPTH - ARROWSIZE;
            const _COLOR = _GetBackgroundColor(this.depth);
            this._layoutElem.innerHTML = this._GenContainerElementHTMLText(_OFFSET, _COLOR);
        }
    }

    Destruct() {
        this._layoutElem.remove();
        this._layoutElem = undefined;
    }

    InsertToDOM(elem) {
        if(this.preNode) {
            this.preNode.layoutElem.after(this._layoutElem);
        } else if(this.nextNode) {
            this.nextNode.layoutElem.before(this._layoutElem);
        } else if(this.parentNode) {
            this.parentNode.containerElem.prepend(this._layoutElem);
        } else {
            elem.prepend(this._layoutElem);
        }
    }

    SetActive(b) {}
}

class AssetItem extends Node {
    constructor(url, meta) {
        super();
        Utils.DefineProperty(this, 'url', url, false, true, false);
        this._layoutElem = Utils.CreateHTMLElement(`<div></div>`);
    }
    get layoutElem() {return this._layoutElem;}
    get containerElem() {return this._layoutElem.lastElementChild;}

    Update(meta) {
        if(this.SUID == meta.SUID) {
            this._name = meta.name;
            return true;
        } else return false;
    }

    Render() {
        if(this.isLeaf) {
            const _OFFSET = this.depth * OFFSET_PER_DEPTH + GAP_SIZE;
            this._layoutElem.innerHTML = `<a id="${this.SUID}" href="javascript:;" class="slog-list-group-item">
    <div style="margin-left:${_OFFSET}em;">${this._name}</div>
</a>`;
        } else {
            const _COLOR = _GetBackgroundColor(this.depth);
            const _OFFSET = this.depth * OFFSET_PER_DEPTH - ARROWSIZE;
            this._layoutElem.innerHTML = `<a id="${this.SUID}" href="javascript:;" class="slog-list-group-item d-flex align-items-center">
    <div class="slog-expand-arrow" style="margin-left:${_OFFSET}em" data-bs-toggle="collapse" data-bs-target="#collaper-${this.SUID}" aria-expanded="false" aria-current="true">
        <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>
    </div>
    <div style="margin-left:${GAP_SIZE}em;">${this._name}</div>
</a>
<div id="collaper-${this.SUID}" class="collapse" style="background-color:${_COLOR}"></div>`;
        }
    }

    Destruct() {
        this._layoutElem.remove();
        this._layoutElem = undefined;
    }

    InsertToDOM(elem) {
        if(this.preNode) {
            this.preNode.layoutElem.after(this._layoutElem);
        } else if(this.nextNode) {
            this.nextNode.layoutElem.before(this._layoutElem);
        } else if(this.parentNode) {
            this.parentNode.containerElem.prepend(this._layoutElem);
        } else {
            elem.prepend(this._layoutElem);
        }
    }

    SetActive(b) {
        if(b) {
            this._layoutElem.firstElementChild.classList.add('active');
        } else {
            this._layoutElem.firstElementChild.classList.remove('active');
        }
    }
}

export default class WidgetSelector {
    constructor() {
        this._layoutElem = Utils.CreateHTMLElement(`<div class="modal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class='modal-dialog modal-lg modal-dialog-scrollable'> 
        <div class='modal-content'>
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Select your widget</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body scroll d-flex flex-row">

                <div class="container">
                  <div class="row row-cols-3">
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>`);
        let _HTMLText = '';
        _HTMLText += _GetRenderedHTMLText('HTML', WIDGET_TYPE.HTML, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('MARKDOWN', WIDGET_TYPE.MARKDOWN, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('TABLE', WIDGET_TYPE.TABLE, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('TODO', WIDGET_TYPE.TODO, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('TEXT', WIDGET_TYPE.TEXT, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('MINDMAP', WIDGET_TYPE.MINDMAP, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('CHARTJS', WIDGET_TYPE.CHARTJS, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('IMAGE', WIDGET_TYPE.IMAGE, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('SCRIPT', WIDGET_TYPE.SCRIPT, '', 'you can use what ever you want HTML tags to layout your article');
        _HTMLText += _GetRenderedHTMLText('SCRIPT2', WIDGET_TYPE.SCRIPT2, '', 'you can use what ever you want HTML tags to layout your article');
        this._inputElem = this._layoutElem.querySelector('.row.row-cols-3');
        this._inputElem.innerHTML = _HTMLText;

        this._cbFn = undefined;
        this._inputElem.addEventListener('click', (e) => {
            if(this._cbFn) {
                ///console.log("e.target:", e.target, "e.currentTarget:", e.currentTarget);
                const _target = e.target;
                if(_target.hasAttribute('data-slog-type')) {
                    const _type = parseInt(_target.dataset['slogType']);
                    this._cbFn(_type);
                }
            }
        })
        this.myModal = new bootstrap.Modal(this._layoutElem);
        this._layoutElem.addEventListener('hidden.bs.modal', () => {
            this._layoutElem.remove();
            this._cbFn = undefined;
        })
    }

    Show(cbFn) {
        this._cbFn = cbFn;
        document.body.append(this._layoutElem);
        this.myModal.show();
    }

    Hide(immediate = false) {
        this.myModal.hide();
        if(immediate) {
            this._layoutElem.remove();
        }
    }
}

/// init;
(function () {
    //document.head.append(Utils.CreateCSSElement());
    console.log("[slog] WidgetSelector inited.");
})();
